<template>
    <div style="position:absolute;left: 0;top: 0; z-index: 999;" class="box" v-show="play">
        <div class="header">
            <div class="top">
                <h3> <span></span>
                    访客信息新增 </h3>
                <span style="font-size: 36px;position: absolute;top: 23px;right: 75px;">
                    <el-button text @click="centerDialogVisible = true">
                        <span @click="centerDialogVisible = false">X</span>
                    </el-button>
                    <el-dialog v-model="centerDialogVisible" title="提示" width="30%" align-center>
                        <span>你确定要关闭此页面吗</span>
                        <template #footer>
                            <span class="dialog-footer">
                                <el-button @click="centerDialogVisible = false">取消</el-button>
                                <el-button type="primary" class="el-button is-text change"
                                    @click="play = false;centerDialogVisible=false">
                                    <span class="el-button is-text change">确定</span>
                                </el-button>
                            </span>
                        </template>
                    </el-dialog>
                </span>
            </div>
        </div>
        <main style="position: relative;">
            <div class="top1">
                <div style="position: absolute; top:20px ;left:28px">访客基本信息：</div>
                <div style="position: absolute; top:20px ;left:573px">造访单位信息：</div>
            </div>
            <div class="left">
                <div>
                    <el-form :model="form" label-width="120px">
                        <el-form-item label="访客信息" style="margin-top: 30px;">
                            <el-input v-model="form.visitorName" placeholder="请输入访客姓名" class='wid' />
                        </el-form-item>
                        <el-form-item label="联系方式" style="margin-top: 30px;">
                            <el-input v-model="form.telephone" placeholder="请输入联系方式" class='wid' />
                        </el-form-item>
                        <el-form-item label="访客性别" style="margin-top: 30px;">
                            <el-select v-model="form.gender" class='wid' placeholder="请输入联系方式">
                                <el-option label="男" value="1" />
                                <el-option label="女" value="2" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="联系学历" style="margin-top: 30px;">
                            <el-input v-model="form.visitorEducate" placeholder="请输入人员学历" class='wid' />
                        </el-form-item>
                        <el-form-item label="绑定微信号" style="margin-top: 30px;">
                            <el-input v-model="form.wechat" placeholder="请输入微信号" class='wid' />
                        </el-form-item>
                    </el-form>
                </div>
            </div>
            <div class="right" style="position: relative;">
                <div>
                    <el-form :model="form1" label-width="120px">
                        <el-form-item label="造访类型" style="position:absolute;top: 25px;left: 112px">
                            <el-select v-model="form1.tel" placeholder="请输入联系方式" class='wid'>
                                <el-option label="企业" value="1" />
                                <el-option label="租户" value="2" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="单位名称" style="position:absolute;top: 25px;left: 550px;">
                            <el-input v-model="form1.name" placeholder="请输入租户名称" class='wid' />
                        </el-form-item>
                        <el-form-item label="负责人姓名" style="position:absolute;top: 85px;left: 112px">
                            <el-input value="张小强" class='wid' />
                        </el-form-item>
                        <el-form-item label="联系方式" style="position:absolute;top: 85px;left: 550px;">
                            <el-input value="12345678901" class='wid' />
                        </el-form-item>
                        <el-form-item label="所属楼宇" style="position:absolute;top: 145px;left: 112px;">
                            <el-select v-model="lou" class='wid'>
                                <el-option label="A1栋" value="A1" />
                                <el-option label="A2栋" value="A2" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="房间名称" style="position:absolute;top: 145px;left: 550px;">
                            <el-input value="12345678901" class='wid' />
                        </el-form-item>
                        <el-form-item label="造访时间" style="position:absolute;top: 205px;left: 112px;">
                            <el-col :span="11">
                                <el-date-picker v-model="form1.time1" type="date" placeholder="请选择造访开始时间"
                                    style="width: 200px;" />
                            </el-col>
                            <el-col :span="2" class="text-center">
                                <span class="text-gray-500">-</span>
                            </el-col>
                            <el-col :span="11" style="position:absolute;left: 370px;width: 200px;">
                                <el-date-picker v-model="form1.time2" type="date" placeholder="请选择造访结束时间"
                                    style="width: 200px;" />
                            </el-col>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </main>
        <footer>
            <el-button type="primary" size="large" style="margin-left: 700px;margin-top: 50px;"><span class="add">保存</span>
            </el-button>
            <el-button size="large" style="margin-left: 100px;margin-top: 50px;">
                <span @click="centerDialogVisible = true">取消</span>
            </el-button>
        </footer>
    </div>
</template>
<script setup lang="ts">
import {  ref } from 'vue'
var play = ref(false)
const centerDialogVisible = ref(false)
const form:any =ref({});
const form1:any =ref({});

var lou = ()=>{};
defineExpose({
    play,form,form1
})


</script>
<style scoped lang="scss">
.dialog-footer button:first-child {
    margin-right: 10px;
}

.box {
    width: 100%;
    height: 100%;
    background: #fff;
}

footer {
    margin: auto;
    background-color: white;
    margin-left: 20px;
    height: 120px;

}

.wid {
    width: 200px;
}

.header {
    margin: 20px;
    display: flex;
    justify-content: space-between;
    height: 60px;
    background: #fff;
    align-items: center;
    padding: 0 10px;
    padding-right: 20px;
    margin-bottom: 10px;

    h3 {
        display: flex;
        height: 100%;
        margin-left: 30px;
        font-weight: 600;

        span {
            width: 8px;
            flex: 1;
            background: rgb(94, 128, 234);
            margin-right: 15px;
        }
    }
}

main {
    display: flex;
    margin: 20px;
    background-color: white;
    margin-bottom: 0;

    >.left {
        flex: 1;
        height: 548px;
        border: 1px solid black;
        border-radius: 20px;
        margin-left: 30px;
        margin-top: 50px;
    }

    >.right {
        margin-left: 50px;
        margin-top: 50px;
        margin-right: 50px;
        flex: 2;
        height: 548px;
        border: 1px solid black;
        border-radius: 20px;
    }
}
</style>